<template>
  <!-- 进度条遮罩层：全屏居中显示 -->
  <view class="progress-mask" v-if="showProgress">
    <!-- 进度条容器：控制宽度和内边距 -->
    <view class="progress-container">
      <!-- 可添加标题（原数据中title未使用，可选） -->
      <view class="progress-title" v-if="title">{{ title }}</view>
      <!-- 进度条组件 -->
      <u-line-progress :percentage="progress"></u-line-progress>
    </view>
  </view>
</template>

<script>
export default {
	name: 'ProgressBar', // 规范组件名， PascalCase 风格
	data() {
		return {
			showProgress: false, // 控制组件显示/隐藏
			progress: 0, // 进度百分比（0-100）
		    title:""
		};
	},



	mounted() {
		// 绑定全局事件：接收外部传递的进度数据
		uni.$on('update-progress', (res) => {
		
			if(res.progress>0){
				this.showProgress=true
				this.progress=res.progress
				this.title=res.title
			}
			if(res.progress===100){
				setTimeout(()=>{
					this.showProgress=false
				},1000)
			}
             
			}
		)},

	beforeUnmount() {
		// 销毁前移除全局监听，防止内存泄漏
		uni.$off('update-progress');
		// 强制隐藏组件，避免页面切换时残留
		this.showProgress = false;
	}
};
</script>

<style scoped lang="scss">
/* 遮罩层：全屏半透明，居中承载进度条 */
.progress-mask {
  /* 1. 全屏覆盖：固定定位+占满屏幕 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 2. 半透明背景：避免遮挡内容看不清，可调整透明度 */
  background-color: rgba(0, 0, 0, 0.3);
  /* 3. Flex 布局：让子元素（进度条容器）垂直+水平居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  /* 4. 层级置顶：避免被其他元素遮挡 */
  z-index: 9999;
}

/* 进度条容器：白色背景+圆角+阴影，提升质感 */
.progress-container {
  /* 1. 固定宽度：避免进度条拉伸过宽或过窄 */
  width: 80%; /* 占屏幕宽度80%，可根据需求调整 */
  max-width: 500px; /* 最大宽度限制，适配大屏 */
  /* 2. 内边距+背景：分隔内容，提升视觉效果 */
  padding: 20px;
  background-color: #fff;
  /* 3. 圆角+阴影：优化外观 */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* 4. 内部元素垂直排列（标题+进度条） */
  display: flex;
  flex-direction: column;
  gap: 12px; /* 标题和进度条的间距 */
}

/* 进度条标题样式（可选，根据需求调整） */
.progress-title {
  font-size: 16px;
  color: #333;
  text-align: center;
}
</style>